<template>
  <!-- 添加问题工单 -->
  <el-dialog title='添加问题工单' :visible.sync="isShowTalFrom" width="35%" class="complainmain" :show-close="false"
    :before-close="onTalFromBeforeClose">
    <el-form ref="complaintAdd" :model="complaintAdd" label-width="130px" class="complaint_main" :rules="refundrules">
      <el-form-item label="后台单号" prop="xmbzNo">
        <el-input v-model.trim="complaintAdd.xmbzNo" size="small" style="width:200px" maxlength="30"
          onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"
          onafterpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"></el-input>
      </el-form-item>

      <!-- 添加投诉工单 -->
      <el-form-item label="部门失误类型">
        <ele-multi-cascader clearable v-model="problemList" :options="errorTypeList" separator=">"
          placeholder="请选择部门失误类型" style="width: 280px;"></ele-multi-cascader>
      </el-form-item>

      <el-form-item label="投诉等级" prop="complaintLevel">
        <ComplaintLevelSelect v-model="complaintAdd.complaintLevel" style="width: 150px;margin-right:10px">
        </ComplaintLevelSelect>
      </el-form-item>

      <el-form-item label="处理状态" prop="complainState">
        <el-select v-model="complaintAdd.complainState" placeholder="请选择处理状态" size="small"
          style="width: 150px;margin-right:10px">
          <el-option v-for="item in dealstatusList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"
            size="small"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="投诉渠道" prop="complaintChannel">
        <ComplaintChannelSelect v-model="complaintAdd.complaintChannel" @change="onComplaintChannelChange"
          style="width: 150px;margin-right:10px"></ComplaintChannelSelect>
      </el-form-item>
      <el-form-item label="责任人" prop="personLiable">
        <el-input v-model.trim="complaintAdd.personLiable" size="small" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input onkeyup="value=value.replace(/[^\-?\d.]/g,'')" onafterpaste="value=value.replace(/[^\-?\d.]/g,'')"
          v-model.number="complaintAdd.phone" style="width:200px" size="small" maxlength="11"></el-input>
      </el-form-item>
      <!--  <el-form-item label="赔偿方式" prop="compensationMethod">
          <el-checkbox-group v-model="complaintAdd.compensationMethod" size="small">
            <el-checkbox v-for="(item,index) in compensationList" :key="index" :label="item.dictKey">{{ item.dictValue }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="退款金额" prop="refundAmount">
          <el-input v-model="complaintAdd.refundAmount" type="number" size="small" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="诚意金" prop="damages">
          <el-input v-model="complaintAdd.damages" type="number" size="small" style="width:200px"></el-input>
        </el-form-item>-->
      <el-form-item label="投诉内容" prop="complaintContent">
        <el-input type="textarea" v-model.trim="complaintAdd.complaintContent" size="small" maxlength="500"
          show-word-limit :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
      </el-form-item>
      <el-form-item label="处理结果" prop="processingResults">
        <el-input type="textarea" v-model.trim="complaintAdd.processingResults" size="small" maxlength="250"
          show-word-limit :autosize="{ minRows: 4 }"></el-input>
      </el-form-item>

      <el-form-item label="图片附图:" prop="title">
        <div style="margin-bottom: 15px;">
          <el-upload action="/api/xmbz-goods/file/upload" :data="{ tag: 'problem' }" :on-exceed="handleExceed"
            list-type="picture-card" :on-success="addproblemSuccess" :limit="10" :file-list="addproblemForm.pics"
            :on-remove="addproblemRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleAddcomplaint()">添加</el-button>
        <el-button @click="isShowTalFrom = false" size="small">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  addWorkOrderProblem, // 新增创建问题工单
} from "@/api/workorder"
import { prodComplaintTem } from '@/const'
export default {
  props: {
    dealstatusList: {
      type: Array,
      default: () => []
    },
    errorTypeList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      isShowTalFrom: false,
      addproblemForm: {     // 添加问题工单图片
        pics: []
      },
      problemList: [],   //  问题投诉显示列表
      complaintAdd: {
        xmbzNo: "", //订单号
        platformNo: "", //第三方
        responsibleDepartment: "", //责任部门
        departmentErrorType: "", //失误类型
        complaintLevel: "", //等级
        complaintChannel: "", //渠道
        personLiable: "", // 责任人
        phone: "", //手机号
        compensationMethod: [], //赔偿方式
        refundAmount: "", //退款金额
        damages: "", //诚意金
        complaintContent: "", //投诉内容
        processingResults: "", //处理结果
        complainState: "" // 处理状态
      },
      refundrules: {
        xmbzNo: [
          {
            required: true,
            message: "后台单号为空",
            trigger: "blur"
          },
          {
            pattern: /^[0-9a-zA-Z]+$/,
            message: "后台单号为数字字母混合",
            trigger: "blur"
          }
        ],
        platformNo: [
          {
            required: true,
            message: "平台单号为空",
            trigger: "blur"
          },
          {
            pattern: /^[0-9a-zA-Z]+$/,
            message: "后台单号为数字字母混合",
            trigger: "blur"
          }
        ],
        responsibleDepartment: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change"
          }
        ],
        departmentErrorType: [
          {
            required: true,
            message: "请选择失误类型",
            trigger: "change"
          }
        ],
        complaintLevel: [
          {
            required: true,
            message: "请选择投诉等级",
            trigger: "change"
          }
        ],
        complaintChannel: [
          {
            required: true,
            message: "请选择投诉渠道",
            trigger: "change"
          }
        ],
        personLiable: [
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur"
          }
        ],
        phone: [
          {
            pattern: 11 && /^((12|13|14|15|16|17|18)[0-9]{1}\d{8})$/,
            message: "手机号格式不正确",
            trigger: "blur"
          }
        ],
        damages: [
          {
            required: true,
            message: "请输入诚意金",
            trigger: "change"
          }
        ],
        refundAmount: [
          {
            required: true,
            message: "请输入退款金额",
            trigger: "change"
          }
        ],
        complaintContent: [
          {
            required: true,
            message: "请输入投诉内容",
            trigger: "change"
          }
        ],
        // processingResults: [
        //   {
        //     required: true,
        //     message: "请选择处理结果",
        //     trigger: "change"
        //   }
        // ]
      },
    };
  },
  methods: {
    show() {
      if (this.$refs['complaintAdd'] !== undefined) {
        this.$refs['complaintAdd'].resetFields()
      }
      this.isShowTalFrom = true
    },
    handleAddcomplaint() {
      this.$refs['complaintAdd'].validate(valid => {
        if (valid) {
          if (!this.problemList || !this.problemList.length) {
            this.$message({
              type: "warning",
              message: "请选择部门失误类型!"
            })
            return false
          }
          const complaintData = this.getParams()
          addWorkOrderProblem(complaintData).then(() => {
            this.$message({
              type: "success",
              message: "添加成功!"
            })
            this.isShowTalFrom = false
            this.$emit('added')
          })
        } else {
          this.$message({
            type: "warning",
            message: "填写相关提交内容!"
          })
          return false
        }
      })
    },
    getParams() {
      const params = {
        compensationMethod: this.complaintAdd.compensationMethod.join(','),
        complaintChannel: this.complaintAdd.complaintChannel,
        complaintContent: this.complaintAdd.complaintContent,
        complaintLevel: this.complaintAdd.complaintLevel,
        edamages: this.complaintAdd.damages,
        departmentErrorType: this.complaintAdd.departmentErrorType,
        personLiable: this.complaintAdd.personLiable,
        phone: this.complaintAdd.phone,
        platformNo: this.complaintAdd.platformNo,
        processingResults: this.complaintAdd.processingResults,
        refundAmount: this.complaintAdd.refundAmount,
        xmbzNo: this.complaintAdd.xmbzNo,
        handleState: this.complaintAdd.complainState,
        extJson: JSON.stringify({ 'img': this.addproblemForm.pics.map(item => item.url) }),
        responsibleDepartmentError: this.problemList.join(',')
      }
      return params
    },
    onTalFromBeforeClose() {
      this.$confirm("关闭窗口, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.isShowTalFrom = false
      })
    },
    // 添加问题图片列表
    addproblemSuccess (response) {
      this.addproblemForm.pics.push({
        url: response.data
      })
    },
    // 删除问题图片列表
    addproblemRemove(index) {
      this.addproblemForm.pics.map((item, ids) => {
        if (item.uid == index.uid) {
          this.addproblemForm.pics.splice(ids, 1)
        }
      })
    },
    //  共用选择多图片
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    onComplaintChannelChange(value) {
      if (value === 9) { // 生产群
        this.complaintAdd.complaintContent = prodComplaintTem
      }
    }
  }
};
</script>
<style lang="scss" scoped>

</style>